<template>
  <div class="home-container">
    <!--
        tab标签页
        v-model="active" active的值指定tabs的下标，即跳转到第几个频道
    -->
    <van-tabs v-model="active">
      <!-- <van-tab v-for="item in channels" :key="item.id" :title="item.name">-->
      <!-- 频道数据使用vuex来管理，不再依赖于本组件的data -->
      <van-tab v-for="item in $store.state.channels.channels" :key="item.id" :title="item.name">
        <!--
            使用文章列表子组件
            父传子，将频道信息传递给子组件(articleList.vue)
            父接收子组件(articleList.vue)消息， @show-more接收子组件的show-more属性值
            ref="article"：ref取得当前ArticleList组件的dom元素，即当前组件的一切，article是自定义的，没有含义
        -->
        <ArticleList :channel="item" @show-more="handleShowMore" ref="article"/>
      </van-tab>
    </van-tabs>

    <van-button/>

    <!-- 遮罩层 -->
    <van-popup v-model="showMore" style="width: 60%">
      <!-- 父组件监听子组件dislike事件 -->
      <MoreAction @dislike="dislike"></MoreAction>
    </van-popup>

    <!-- 频道管理按钮 -->
    <div class="bar-btn" @click="showChannelEdit=true">
      <van-icon name="wap-nav"/>
    </div>

    <!--
        频道管理页面
        动作面板，折叠面板
    -->
    <van-action-sheet v-model="showChannelEdit" title="全部分类">
      <!--
          在父组件注册事件，实现对子组件对事件处理
          @change-channel：和子组件方法中的this.$emit('change-channel')保持一致，即可监听到子组件的事件
          :active(自定义属性名) 将父组件的值传递给子组件，子组件通过props:['自定义属性名']来接收
      -->
      <ChannelEdit v-if="showChannelEdit" @change-channel="changeChannel" :active="active"
                   @updateChannel="updateChannel"></ChannelEdit>
    </van-action-sheet>
  </div>
</template>

<script>
  import { reqGetChannels } from '@/api/channels.js'
  import { reqDisLikeArticle, reqReportArticle } from '@/api/article.js'
  // 文章列表页面
  import ArticleList from '@/views/home/components/articleList'
  // 文章操作页面
  import MoreAction from '@/views/home/components/moreAction'
  // 频道管理页面
  import ChannelEdit from '@/views/home/components/channelEdit'

  export default {
    name: 'home',
    // 注册子组件
    components: { ArticleList, MoreAction, ChannelEdit },
    data () {
      return {
        // 频道
        // channels: [],
        // 文章关闭按钮的布尔值
        showMore: false,
        // 不感兴趣的文章所在的频道id
        channelId: '',
        // 不感兴趣的文章id
        disLikeId: '',
        showChannelEdit: false,
        // tabs标签页的索引
        active: 0
      }
    },
    created () {
      /*
        频道的数据现在存放到vuex中了。通过this.$store.dispatch('指定js/指定方法名'])
        调用vux中的异步方法actions，获取channels
       */
      this.$store.dispatch('channels/getChannelsAsync')
      // 获取所有频道
      this.$store.dispatch('channels/getAllChannelsAsync')
      // 调用api获取用户的频道
      // this.getChannels()

      // 接收事件中心的订阅事件（通过''里的值来绑定对应事件）
      this.$bus.$on('jubao', (value) => {
        // console.log('开始举报文章：value=' + value)
        // 调用举报文章的方法，value是举报文章的类型
        reqReportArticle(this.disLikeId, value)
        // 获取子组件指定频道的下标
        const index = this.$refs.article.findIndex(e => e.channel.id === this.channelId)
        // 调用子组件中的方法，并传递举报类型
        // 子组件中用了v-for，this.$refs.article[index]可以定位到具体的下标
        // 子组件没用v-for同样可以定位到
        // 根据指定下标定位到具体到频道，传入不喜欢的id，调用子组件方法，
        // 子组件就可以在list中过滤到对应到数据
        this.$refs.article[index].filterList(this.disLikeId)
        // 父组件直接关闭遮罩层
        this.showMore = false
      })
    },
    methods: {
      // 获取用户的频道
      // async getChannels () {
      //   const res = await reqGetChannels()
      //   this.channels = res.data.data.channels
      // },

      // 展开遮罩层
      handleShowMore (flag, articleId, channelId) {
        // 由子组件传递的参数来控制是否展示遮罩层
        this.showMore = flag
        this.disLikeId = articleId
        this.channelId = channelId
        // console.log('文章id：' + articleId)
        // console.log('频道id：' + channelId)
      },

      // 不感兴趣方法
      async dislike () {
        // console.log('不感兴趣操作')
        const res = await reqDisLikeArticle(this.disLikeId)
        // console.log('不感兴趣接口返回值：' + res)
        // 使用articleList子组件定义的ref，配合$refs来操作子组件
        // console.log('看看绑定的是什么：' + this.$refs.article)
        // 获取子组件指定频道的下标
        const index = this.$refs.article.findIndex(e => e.channel.id === this.channelId)
        // console.log('index：' + index)
        // $refs.article调用子组件，index指定子组件索引，filterList是子组件里的方法。
        // 子组件在点击删除按钮的时候，会触发事件，将文章id传给父组件，
        // 父组件会监听到子组件具体下标的事件，调用子组件的方法，删除不喜欢的列表，
        // 这里的删除是子组件中的list过滤，而reqDisLikeArticle接口会删除后台数据，
        // 这样就实现数据的统一了
        // index：可以根据下标来过滤对应的不喜欢的文章
        this.$refs.article[index].filterList(this.disLikeId)
        // 关闭遮罩层
        this.showMore = false
      },

      // 在频道管理动作面板中，点击用户订阅对频道，跳转到指定到频道
      changeChannel (index) {
        // 1.点击后，首先关闭动作面板，即频道管理页面
        this.showChannelEdit = false
        // 2.切换到当前点击到频道，即更新频道的下标
        this.active = index
      },

      // 删除频道时，更新active(tabs标签页的索引
      updateChannel (active) {
        this.active = active
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 设置激活van-tabs__line的颜色
  // 解决方案1. 将scoped属性移除 scoped属性的作用是以下样式只作用到当前组件
  // 解决方案2: 深度选择器(设置的元素不在页面结构中展示,而是组件内部的结构样式)
  // scss的深度选择器是 ::v-deep less的深度选择器是/deep/ css的深度选择器 >>>
  .home-container {
    height: calc(100vh - 46px - 50px);
    padding-top: 44px;
    // cs3盒子模型
    box-sizing: border-box;

    ::v-deep {
      .van-tabs_line {
        background-color: #3196fa;
      }

      // 设置tabs标题固定定位
      .van-tabs_wrap {
        position: fixed;
        top: 46px;
        width: calc(100% - 20px); // 定位的元素不设置宽度默认是内容撑开的
      }

      .van-tabs {
        height: 100%;

        .van-tabs_content {
          height: 100%;
          // overflow: auto;
          // 为每一个tab面板设置自己的滚动条
          .van-tab_pane {
            height: 100%;
            // overflow: auto;
          }
        }
      }
    }

    // 频道管理的开关按钮
    .bar-btn {
      position: fixed;
      right: 5px;
      top: 57px;
      display: flex;
      align-items: center;
      background-color: #fff;
      opacity: 0.8;
      z-index: 1;

      .van-icon-wap-nav {
        font-size: 20px;
      }
    }
  }
</style>
